// 受众画像配置页面样式

.audience-config-container {
  background: #ffffff;
  min-height: 100vh;
  padding: 20px;
}

// 页面头部
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;

  .header-content {
    flex: 1;

    .page-title {
      font-size: 24px;
      font-weight: 600;
      color: #1f2937;
      margin: 0 0 8px 0;
    }

    .page-subtitle {
      font-size: 14px;
      color: #6b7280;
      margin: 0 0 8px 0;
    }

    .description {
      font-size: 14px;
      color: #9ca3af;
      margin: 0;
      line-height: 1.5;
      max-width: 600px;
    }
  }

  .header-actions {
    display: flex;
    gap: 12px;
    flex-shrink: 0;

    .el-button {
      min-width: 100px;

      .el-icon {
        font-size: 16px;
      }
    }
  }
}

// 配置内容
.config-content {
  .config-section {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-bottom: 24px;
    overflow: hidden;
    border: 1px solid #e5e7eb;

    .section-header {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 24px 24px 0 24px;
      border-bottom: 1px solid #f3f4f6;
      margin-bottom: 24px;

      .section-icon {
        color: #3b82f6;
        font-size: 18px;
      }

      .section-title {
        font-size: 18px;
        font-weight: 600;
        color: #1f2937;
        margin: 0;
        padding-bottom: 16px;
      }
    }

    // 表单网格布局
    .form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      padding: 0 24px 24px 24px;

      .form-item {
        .form-label {
          display: block;
          font-size: 14px;
          font-weight: 500;
          color: #374151;
          margin-bottom: 8px;
        }

        .form-input {
          width: 100%;

          :deep(.el-input__wrapper) {
            border-radius: 6px;
            border: 1px solid #e5e7eb;

            &:hover {
              border-color: #d1d5db;
            }

            &.is-focus {
              border-color: #3b82f6;
              box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
            }
          }
        }
      }
    }

    // 预设项目
    .preset-item {
      padding: 0 24px 24px 24px;

      .preset-label {
        display: block;
        font-size: 14px;
        font-weight: 500;
        color: #374151;
        margin-bottom: 8px;
      }

      .preset-textarea {
        width: 100%;

        :deep(.el-textarea__inner) {
          border-radius: 6px;
          border: 1px solid #e5e7eb;
          font-size: 14px;
          line-height: 1.5;

          &:hover {
            border-color: #d1d5db;
          }

          &:focus {
            border-color: #3b82f6;
            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
          }
        }
      }
    }

    .update-time {
      padding: 12px 24px 24px 24px;
      font-size: 12px;
      color: #9ca3af;
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .audience-config-container {
    padding: 15px;
  }

  .page-header {
    flex-direction: column;
    gap: 16px;

    .header-content {
      width: 100%;
    }

    .header-actions {
      width: 100%;
      justify-content: flex-start;
    }
  }

  .config-content {
    .config-section {
      .form-grid {
        grid-template-columns: 1fr;
        gap: 16px;
      }
    }
  }
}
